<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="generator" content="www.jsdaima.com"
	data-variable=",cn,10001,,10001,M1156015" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>死亡健身</title>
<meta name="author" content="js代码" />
<meta name="copyright" content="js代码" />
<link rel='stylesheet' href='css/index.css'>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
</head>

<body class=" nav-header">

	<header class="">
		<div class="head-box">
			<div class="container">
				<div class="head-left">
					<div class="head-left-wrapper">
						<div class="head-left-slide">
							<p>欢迎光临死亡健身！</p>

						</div>
					</div>
				</div>
				<div class="head-right">
					<div class="head-other">
						<b> 登录/注册 <i class="caret"> </i>
						</b> <span> <a href="login.html" title="登录"> <i
								class="fa fa-bookmark"> </i> 登录
						</a>
							<hr /> <a href="regist.html" title="注册"> <i
								class="fa fa-book"> </i> 注册
						</a>
						</span>
					</div>
				</div>
			</div>
		</div>
	</header>
	<nav class="navbar navbar-default met-nav " role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button"
					class="navbar-toggle hamburger hamburger-close collapsed"
					data-target="#navbar-default-collapse" data-toggle="collapse">
					<span class="sr-only"> Toggle navigation </span> <span
						class="hamburger-bar"> </span>
				</button>
				<a href="#" class="navbar-brand navbar-logo vertical-align" title="">
					<h1 class='hide'>死亡健身</h1>
					<div class="vertical-align-middle">
						<img src="picture/logo.png" alt="" title="" />
					</div>
				</a>
				<h2 class='hide'></h2>
			</div>
			<div class="collapse navbar-collapse navbar-collapse-toolbar"
				id="navbar-default-collapse">

				<ul class="nav navbar-nav navbar-right navlist">
					<li class="margin-right-20"><a href="index.html" title="首页"
						class="link "> 首页 </a></li>

					<li class="dropdown margin-right-20"><a class="link  active"
						href="venueView.html"> 场馆信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
						href="finduser.html"> 学员信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  " href="relationship.html">
                            关注
                        </a>
                        <ul style="display:none">
                        </ul>
                    </li>
                    <li class="dropdown margin-right-20">
                        <a class="link  " href="contact.html">
                            通知
                        </a>
                        <ul style="display:none">
                        </ul>
                    </li>
                    <li class="dropdown margin-right-20">
                        <a class="link  " href="coach.html">
                            个人中心
                        </a>
						<ul style="display: none">
						</ul></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="met-column-nav ">
		<div class="container">
			<div class="row">
				<div class="sidebar-tile">
					<ul class="met-column-nav-ul invisible-xs">
						<a href="index.html"> 主页 </a> >
						<a href="venueView.html"> 场馆信息 </a>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="feedback-box">
		<div class="container" id="abc">
			<div class="feedback-cut">
				<table class="table table-striped">
				<thead>
					<tr>
						
						<td>名称</td>
						<td>地址</td>
						<td>手机号</td>
					</tr>

				</thead>
				<tbody>
					<tr v-for="(item,index) in currentPageData" :key="index">
						<td>{{item.nickname}}</td>
						<td>{{item.address}}</td>
						<td>{{item.phoneNumber}}</td>
						<td><button class="btn btn-success" id="modal" href="#" data-toggle="modal" data-target="#loginModal" @click="detail(item.vid)">详情</button></td>
					</tr>
					
				</tbody>
			</table>
				<footer>
					<button @click="prevPage()">上一页</button>
					<span>第{{currentPage}}页/共{{totalPage}}页</span>
					<button @click="nextPage()">下一页</button>
				</footer>
			</div>
		</div>
	</div>
	<div class="met-footnav">
		<div class="container">
			<div class="row mob-masonry">
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a href="#" title="关于我们"> 关于我们 </a>
					</h4>

				</div>
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a href="#" title="新闻资讯"> 新闻资讯 </a>
					</h4>

				</div>
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a> 会馆信息 </a>
					</h4>

				</div>
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a> 更多 </a>
					</h4>
				</div>
				<div class="col-md-4 col-ms-12 col-xs-12 info masonry-item">
					<div class="info-phone">
						<b> 服务热线 </b> <em> <a> 400-123-4567 </a>
						</em>
						<p>客服服务时段：周一至周五，9:30 - 20:30，节假日休息</p>

					</div>
				</div>
			</div>
		</div>
	</div>

	<footer>
		<div class="container text-center">
			<div class="powered_by_metinfo">Copyright &copy; 2002-2020 死亡健身
				版权所有</div>
		</div>
	</footer>
	<button type="button"
		class="btn btn-icon btn-primary btn-squared met-scroll-top hide">
		<i class="icon wb-chevron-up" aria-hidden="true"> </i>
	</button>
	<script src="js/index.js">	</script>
	<script type="text/javascript">
	/*	let productList = [];
 	for (let i = 0; i < 99; i++) {
	    productList.push({
	        name: "第" + i + "瓶奶酪",
	        count: Math.random() * 100
	    });
	} */
	new Vue({
		el:"#abc",
	    data() {
	        return {
	            productList:[], //所有数据
	            totalPage: 1, // 统共页数，默认为1
	            currentPage: 1, //当前页数 ，默认为1
	            pageSize: 10, // 每页显示数量
	            currentPageData: [] //当前页显示内容
	        };
	    },
	    mounted() {
	    	axios.get(
	    			"/venue/selectAll"
	    		).then(res=>{
				console.info(res.data.data)
	    			 if(res.data.code==500){
	  						location.href="/error/500.html";
	  					}
	    			console.info(res.data.data);
	    			this.productList=res.data.data;
	    			  // 计算一共有几页
	    	        this.totalPage = Math.ceil(this.productList.length / this.pageSize);
	    	        // 计算得0时设置为1
	    	        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
	    	        this.setCurrentPageData();
	    		});
	    },
	    methods: {
	        // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
	       setCurrentPageData() {
	            let begin = (this.currentPage - 1) * this.pageSize;
	            let end = this.currentPage * this.pageSize;
	            this.currentPageData = this.productList.slice(
	                begin,
	                end
	            );
	        },
	        //上一页
	        prevPage() {
	            console.log(this.currentPage);
	            if (this.currentPage == 1) return;
	         
	             this.currentPage--;
	             this.setCurrentPageData();
	            
	        },
	        // 下一页
	        nextPage() {
	            if (this.currentPage == this.totalPage)return ;
	 
	             this.currentPage++;
	             this.setCurrentPageData();
	            
	        },
	        detail(id){
	        	layer.open({
	        		  type: 2,
	        		  title: '场馆详情',
	        		  skin: 'layui-layer-rim', //加上边框
	        		  area: ['840px', '460px'], //宽高
	        		  shadeClose: false,
	        		  content: 'venueDetails.html?id='+id
	        		});
	        }
	    }
	});
	</script>

</body>

</html>